<template>
  <div class="tab-title-page audit_supplier">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="店铺名称">
          <el-input v-model="searchForm.shopname" placeholder="请输入店铺名称" clearable />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="searchForm.account_num" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item label="申请时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" class="flex-1 nav_tabs" @tab-click="handleClick">
      <el-tab-pane :label="`全部(${count.status_total})`" name="all" />
      <el-tab-pane :label="`待审核(${count.notcheck_status_total})`" name="2" />
      <el-tab-pane :label="`已审核(${count.istcheck_status_total})`" name="1" />
    </el-tabs>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
        </h5>
      </div>
      <el-table v-show="tableData.length > -1" :data="tableData" border>
        <el-table-column align="center" prop="id" label="ID" width="70" />
        <el-table-column align="center" prop="shopname" label="店铺名称" />
        <el-table-column align="center" prop="account_num" label="账号" />
        <el-table-column align="center" label="店铺头像">
          <template slot-scope="scope">
            <el-image style="width:50px;height:50px" fit="fill" :src="$globalObj.imgBaseUrl + scope.row.photo">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="people" label="联系人姓名" />
        <el-table-column align="center" prop="contact_tel" width="120" label="联系人手机号" />
        <el-table-column align="center" prop="name" label="经营项目" />
        <el-table-column align="center" label="发票类型">
          <template slot-scope="scope">
            <span>{{ scope.row.faptype == 1 ? '普通发票' : scope.row.faptype == 2 ? '增值税发票' : '普通发票+增值税发票' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="faptype_name"
          label="推荐人"
        />
        <el-table-column
          align="center"
          prop="faptype_name"
          label="实付金额"
        />
        <el-table-column
          align="center"
          prop="faptype_name"
          label="合同归档"
        /> -->
        <el-table-column align="center" prop="status" label="审核状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 1 ? 'success' : 'warning'">{{ scope.row.status == 1 ? "已审核" : "待审核" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="addtime" label="申请时间" width="100" />
        <el-table-column fixed="right" align="center" label="操作" width="240">
          <template slot-scope="scope">
            <el-button v-if="$hasMethod('#pass') && scope.row.status == 2" type="primary" size="mini" @click="pass(scope.row.id)">通过</el-button>
            <el-button v-if="$hasMethod('#delete')" type="danger" size="mini" @click="removeItem(scope.row.id)">删除</el-button>
            <el-dropdown v-if="$hasMethod('#edit') || $hasMethod('#view')" @command="command => handleMore(command, scope.row)">
              <span class="el-dropdown-link blue-font pointer" style="margin-left:10px">
                更多操作<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="$hasMethod('#view')" command="view">查看资料</el-dropdown-item>
                <el-dropdown-item v-if="$hasMethod('#edit') && scope.row.status == 2" command="edit">编辑资料</el-dropdown-item>
                <el-dropdown-item v-if="$hasMethod('#setWithdraw')" command="setWithdraw">设置提现</el-dropdown-item>
                <el-dropdown-item v-if="$hasMethod('#onlinePay')" command="onlinePay">线上支付</el-dropdown-item>
                <el-dropdown-item v-if="$hasMethod('#offlinePay')" command="offlinePay">线下支付</el-dropdown-item>
                <el-dropdown-item v-if="$hasMethod('#contract')" command="edit">发起合同</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <custom-page ref="customPage" :total="total" @getList="getList" />
    </div>
  </div>
</template>

<script>
import { supplierCheckList, editShopUserStatus, delShopUser } from '@/api/audit'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      activeName: 'all',
      searchForm: {
        shopname: '',
        account_num: '',
        addtime: ''
      },
      tableData: [],
      total: 0,
      count: {
        status_total: 0,
        notcheck_status_total: 0,
        istcheck_status_total: 0
      }
    }
  },
  methods: {
    pass(id) {
      // 通过
      this.$confirm('您确定要通过审核吗？', '通过', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        editShopUserStatus(id).then(res => {
          this.getList(true)
        });
      }).catch(() => { })
    },
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        delShopUser(id).then(res => {
          this.getList(true)
        });
      }).catch(() => { })
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 获取数据
    getList(flag) {
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      supplierCheckList({
        page,
        pageSize,
        ...this.searchForm,
        status: this.activeName == 'all' ? '' : this.activeName
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total || 0
        this.count = res.count || {}
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.addtime = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        shopname: '',
        account_num: '',
        addtime: ''
      }
      this.getList()
    },
    handleMore(command, item) {
      // console.log(command, item);
      // this.selectedItem = item;
      if (command === 'edit') {
        // 编辑资料
        this.$router.push({ name: 'auditSupplierView', params: { viewId: item.id, toEdit: true }})
      } else if (command === 'view') {
        // 查看资料
        this.$router.push({ name: 'auditSupplierView', params: { viewId: item.id }})
      }
    },
  },
  mounted() {
    this.getList()
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'auditSupplierView') {
      next(vm => {
        vm.getList()
      })
    } else {
      next()
    }
  }
}
</script>

<style lang="scss" scoped>
.common_form_search {
  padding: 15px 30px 0;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

.child_page {
  padding: 30px 30px 15px 30px;
}
</style>
